import React from 'react'
import { Form, Input, Select, Modal } from 'antd'

// 解析textarea
const { TextArea } = Input

const AddUser = (props) => {
    const { visible, cancel, confirm, form } = props
    const { getFieldDecorator } = form;

    const layout = {
        labelCol: { sm: { span: 4 } },
        wrapperCol: { sm: { span: 16 } }
    }

    return (
        <Modal title='添加' visible={visible} onCancel={cancel} onOk={confirm}>
            <Form {...layout}>
                {/*  */}
                <Form.Item label="用户ID">
                    {getFieldDecorator('id', {
                        rules: [{ required: true, message: '请输入用户ID' }],
                        initialValue: '12'
                    })(<Input placeholder='请输入用户id' />)}
                </Form.Item>
                <Form.Item label="用户名称">
                    {getFieldDecorator('name', {
                        rules: [{ required: true, message: '请输入用户名称' }],
                        initialValue: '管理员'
                    })(<Input placeholder='请输入用户名称' />)}
                </Form.Item>
                <Form.Item label="用户角色">
                    {getFieldDecorator('role', {
                        rules: [{ required: true, message: '请输入用户角色' }],
                        initialValue: 'admin'
                        // 这里要加disable 管理员不可被改权限
                    })(<Select style={{ wdith: 120 }}>
                        <Select.Option value="admin">admin</Select.Option>
                        <Select.Option value="editor">editor</Select.Option>
                        <Select.Option value="guest">guest</Select.Option>
                    </Select>
                    )}
                </Form.Item>
                <Form.Item label="用户描述">
                    {getFieldDecorator('description', {
                        rules: [{ required: true, message: '请输入用户角色' }],
                        initialValue: '管理员1号'
                    })(<TextArea rows={4} placeholder='请输入用户角色' />)}
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default Form.create()(AddUser) 